<template>
	<view class="music_player">
		<view class="player_bottom">
			<view class="button_block">
				<image :style="{ transform: 'rotate(' + rotation + 'deg)' }"  class="player_img" :src="currentMusic.cover"></image>
			</view>
			<view class="info_block">{{currentMusic.name}}</view>
			<view @click="play" class="button_block">{{ playIcon.current }}</view>
			<view class="button_block">列表</view>
		</view>
	</view>
</template>

<script>
	export default {
		created() {
			this.getCurrentPalyer()
		},
		data() {
			return { 
				rotation: 0,
     			isRotating: false,
				intervalId: null,
				playIcon:{
					current:'▶️',
					play:'▶️',
					pause:'⏸'
				},
				musicList:{
					height: "500px",
					isShow: true
				},
				currentMusic:{
					"cover":'',
					"name":'',
					"url":''
				}
			}
		},
		methods: {
			// 封面图滚动
			startRotation() {
			  this.isRotating = true;
			  this.intervalId = setInterval(() => {
				this.rotation += 1; // Adjust rotation speed as needed
			  }, 10); // Adjust interval as needed
			},
			stopRotation() {
			  this.isRotating = false;
			  clearInterval(this.intervalId);
			},
			// 获取当前播放信息
			getCurrentPalyer(){
				// 设置定时函数
				setInterval(()=>{
					this.currentMusic = this.$store.getters.getCurrentMusic;
					this.switchPlayIcon(this.$store.getters.getAudioState);
				},1000)
			},
			// 播放音乐
			play(){
				// 切换播放状态
				this.$store.commit(
					'playMusic',
					this.$store.getters.getCurrentMusic
				)
				// 切换播放图标
				this.switchPlayIcon(this.$store.getters.getAudioState);
				
			},
			// 切换播放图标
			switchPlayIcon(isPlay){
				// 切换播放图标
				if (isPlay) {
					this.playIcon.current = this.playIcon.pause;
					this.stopRotation();
					this.startRotation();
				} else {
					this.playIcon.current = this.playIcon.play;
					this.stopRotation();
				}
			}
		}
	}
</script>

<style>
.music_player{
	background-color: white;
	z-index: 1;
	width: 100%;
	position: fixed;
	bottom: 50px;
	height: 50px;
	display: flex;
	flex-direction: row;
}
.player_bottom{
 width: 100%;
 position: fixed;
 bottom: 50px;
 height: 50px;
 display: flex;
 flex-direction: row;
 text-align: center;
 align-items: center;
}
.button_block{
	height: 50px;
	width: 20%;
	line-height: 50px;
}
.info_block{
	width: 40%;
	height: 40px;
	line-height: 40px;
	/* 文本溢出隐藏 */
	overflow: hidden;
}
.player_img{
	border-radius: 50%;
	width: 50px;
	height: 50px;
	background-color: #e8efc4;
}
.player_list{}

</style>